<template>
  <div class="theme-menu">
    <div class="toggle-bar" @click="toggleSwitch()">
      <span>标签</span>
      <span>
        <span class="tagStyle" @click="tagManagementClick">标签管理</span>
        <i v-show="isShow" class="el-icon-arrow-down"></i>
        <i v-show="!isShow" class="el-icon-arrow-right"></i>
      </span>
    </div>

    <div v-show="isShow" class="tree-box">
      <div class="search-box">
        <div class="input-box">
          <i class="el-icon-search"></i>
          <el-input v-model="filterText" size="small" placeholder="搜索" />
        </div>
      </div>
      <!-- 树形菜单 -->
      <div class="country-tree">
        <el-tree
          ref="tree"
          :data="tagList"
          :props="defaultProps"
          :filter-node-method="filterNode"
          node-key="id"
          show-checkbox
          :check-strictly="true"
          @check="checkClick"
        >
          <span slot-scope="{ data }" class="custom-tree-node">
            <span>{{ ($data as any).name }} ({{ ($data as any).total }})</span>
            <!-- <span class="docCount-box">
              {{ data.total }}
            </span> -->
          </span>
        </el-tree>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, defineEmits, watchEffect, ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const emit = defineEmits(['exposureHandle']);
const props = defineProps({
  treeData: {
    type: Array as any,
    default: () => [],
  },
});
const tree = ref<any>(null);
const isShow = ref(true);
const filterText = ref('');
const tagList = ref<any>([]);
const checkedList = ref<any>([]);
const defaultProps = reactive({
  children: 'children',
  label: 'name',
});
watchEffect(() => {
  if (filterText.value) {
    if(tree.value){
      tree.value.filter(filterText.value);
    }
   
  }
});

watchEffect(() => {
  addAttr(props.treeData);
  tagList.value = addAttr(props.treeData);
});
const addAttr = (data:any) => {
  data.forEach((item) => {
    if (item.type === 'category') {
      item.disabled = true;
      if (item.children && item.children.length !== 0) {
        addAttr(item.children);
      }
    }
  });
  return data;
};
const toggleSwitch = () => {
  isShow.value = !isShow.value;
};
const tagManagementClick = () => {
  router.push('/labelManagement');
};
const filterNode = (value, data) => {
  if (!value) return true;
  return data.name.includes(value);
};
const checkClick = (data) => {
  if (data.type === 'tag') {
    const name = data.name;
    const index = checkedList.value.indexOf(name);
    if (index > -1) {
      // 取消选中
      checkedList.value.splice(index, 1);
    } else {
      // 点击选中
      checkedList.value.push(name);
    }

    const strVal = `(tag=="${name}")`;
    emit('exposureHandle', strVal, index > -1);
  }
};
</script>
<style lang="scss" scoped>
.theme-menu {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0px 12px;
  padding: 10px 0;
  .toggle-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    // padding-bottom: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #c0c8e1;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0px;
    .tagStyle {
      color: rgb(2, 137, 247);
      margin-right: 5px;
    }
  }
  .tree-box {
    .search-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;

      .input-box {
        position: relative;
        width: 90%;
        > i {
          position: absolute;
          left: 0px;
          top: 50%;
          transform: translate(0, -50%);
        }

        ::v-deep .el-input__inner {
          padding-left: 20px;
          border: none;
          // border-bottom: 1px solid rgb(58, 64, 77);
          border-radius: 0px;
          background: none;
        }
      }
    }
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      color: rgb(133, 144, 179);
    }
  }
}
</style>
